<template>
    <el-popover
        placement="right"
        trigger="click"
    >
        <el-table :data="table">
            <el-table-column
                width="100"
                property="changeTime"
                label="变更时间"
            ></el-table-column>
            <el-table-column
                width="100"
                property="changedPersonName"
                label="变更人名称"
            ></el-table-column>
            <el-table-column
                width="120"
                property="valueBeforeChange"
                label="变更前数据"
            ></el-table-column>
            <el-table-column
                width="120"
                property="valueAfterChange"
                label="变更后数据"
            ></el-table-column>
        </el-table>
        <img
            @click="clickIcon"
            slot="reference"
            src="@/assets/icon_history.png"
        />
    </el-popover>
</template>

<script>
export default {
    data () {
        return {
            table: []
        }
    },
    props: {
        historyTableData: {
            type: Array,
            default: ()=>[]
        },
        rowData: {
            type: Object,
            default: ()=>({})
        },
        isKey: {
            type: String,
            default: ''
        }
    },
    methods: {
        //点击后接受rowData并处理
        clickIcon () {
            this.table = this.historyTableData.filter(item=>{
                return this.rowData.dtlId == item.dtlId && this.isKey == item.fieldName
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    img{
        margin-left: 15px;
        width: 24px;
        height: 24px;
    }
</style>